<template>
  <div class="auth-container">
    <!-- 左侧品牌展示区域 -->
    <div class="brand-section">
      <div class="brand-content">
        <div class="brand-header">
          <div class="brand-logo">
            <svg width="60" height="60" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
              <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
              <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
            </svg>
          </div>
          <h1 class="brand-title">智能提示词管理平台</h1>
          <p class="brand-subtitle">让AI创作更高效，让灵感触手可及</p>
        </div>

        <div class="features-grid">
          <div class="feature-item">
            <div class="feature-icon">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 11H15M9 15H15M17 21H7C5.89543 21 5 20.1046 5 19V5C5 3.89543 5.89543 3 7 3H12.5858C12.851 3 13.1054 3.10536 13.2929 3.29289L19.7071 9.70711C19.8946 9.89464 20 10.149 20 10.4142V19C20 20.1046 19.1046 21 18 21H17Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <div class="feature-text">
              <h3>智能创作</h3>
              <p>AI驱动的提示词生成</p>
            </div>
          </div>
          <div class="feature-item">
            <div class="feature-icon">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21M13 7C13 9.20914 11.2091 11 9 11C6.79086 11 5 9.20914 5 7C5 4.79086 6.79086 3 9 3C11.2091 3 13 4.79086 13 7ZM24 8V14M21 11H27" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <div class="feature-text">
              <h3>协作分享</h3>
              <p>与团队成员共享创意</p>
            </div>
          </div>
          <div class="feature-item">
            <div class="feature-icon">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M19 14C20.49 12.54 22 10.79 22 8.5C22 7.04131 21.4205 5.64236 20.3891 4.61091C19.3576 3.57946 17.9587 3 16.5 3C15.74 3 15.04 3.16 14.4 3.46L13 4.24L11.6 3.46C10.96 3.16 10.26 3 9.5 3C8.04131 3 6.64236 3.57946 5.61091 4.61091C4.57946 5.64236 4 7.04131 4 8.5C4 10.79 5.51 12.54 7 14L13 21L19 14Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <div class="feature-text">
              <h3>高效管理</h3>
              <p>便捷的分类和标签管理</p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 装饰性图形 -->
      <div class="decorative-shapes">
        <div class="shape shape-1"></div>
        <div class="shape shape-2"></div>
        <div class="shape shape-3"></div>
      </div>
    </div>

    <!-- 右侧注册表单 -->
    <div class="form-section">
      <div class="form-container">
        <div class="form-header">
          <h2 class="form-title">创建账户</h2>
          <p class="form-subtitle">
            已有账户？
            <router-link to="/auth/login" class="login-link">立即登录</router-link>
          </p>
        </div>

        <!-- 社交注册选项 -->
        <div class="social-login">
          <button class="social-btn google-btn">
            <svg width="20" height="20" viewBox="0 0 24 24">
              <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
              <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
              <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
              <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
            </svg>
            使用 Google 注册
          </button>
        </div>

        <div class="divider">
          <span>或使用邮箱注册</span>
        </div>

        <form @submit.prevent="handleRegister" class="register-form">
          <!-- 错误提示 -->
          <div v-if="errorMessage" class="error-message">
            <div class="error-icon">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="12" cy="12" r="10" stroke="#ef4444" stroke-width="2"/>
                <line x1="15" y1="9" x2="9" y2="15" stroke="#ef4444" stroke-width="2"/>
                <line x1="9" y1="9" x2="15" y2="15" stroke="#ef4444" stroke-width="2"/>
              </svg>
            </div>
            <span class="error-text">{{ errorMessage }}</span>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label class="form-label">姓</label>
              <input
                v-model="firstName"
                type="text"
                class="form-input"
                placeholder="请输入姓氏"
                required
              />
            </div>
            <div class="form-group">
              <label class="form-label">名</label>
              <input
                v-model="lastName"
                type="text"
                class="form-input"
                placeholder="请输入名字"
                required
              />
            </div>
          </div>

          <div class="form-group">
            <label class="form-label">邮箱地址</label>
            <input
              v-model="email"
              @input="checkEmailExists"
              type="email"
              class="form-input"
              :class="{ error: emailErrorMessage }"
              placeholder="请输入您的邮箱地址"
              required
            />
            <div v-if="emailCheckLoading" class="checking-message">
              正在检查邮箱...
            </div>
            <div v-if="emailErrorMessage" class="error-message">
              {{ emailErrorMessage }}
            </div>
          </div>

          <div class="form-group">
            <label class="form-label">密码</label>
            <div class="password-input-wrapper">
              <input
                v-model="password"
                :type="showPassword ? 'text' : 'password'"
                class="form-input"
                :class="{ error: passwordLengthError }"
                placeholder="请输入密码（至少8位）"
                required
                minlength="8"
              />
              <button
                type="button"
                class="password-toggle"
                @click="showPassword = !showPassword"
              >
                <svg v-if="showPassword" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20C7 20 2.73 16.39 1 12A18.45 18.45 0 0 1 5.06 5.06M9.9 4.24A9.12 9.12 0 0 1 12 4C17 4 21.27 7.61 23 12A18.5 18.5 0 0 1 19.42 16.42" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M12 9V15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M3 3L21 21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <svg v-else width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1 12S5 4 12 4S23 12 23 12S19 20 12 20S1 12 1 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
                </svg>
              </button>
            </div>
            <div v-if="passwordLengthError" class="error-message">
              {{ passwordLengthError }}
            </div>
            <div v-if="password && !passwordLengthError" class="password-strength">
              <div class="strength-bar">
                <div :class="['strength-fill', passwordStrengthClass]"></div>
              </div>
              <span class="strength-text">{{ passwordStrengthText }}</span>
            </div>
          </div>

          <div class="form-group">
            <label class="form-label">确认密码</label>
            <div class="password-input-wrapper">
              <input
                v-model="confirmPassword"
                :type="showConfirmPassword ? 'text' : 'password'"
                class="form-input"
                :class="{ error: passwordMatchError }"
                placeholder="请再次输入密码"
                required
              />
              <button
                type="button"
                class="password-toggle"
                @click="showConfirmPassword = !showConfirmPassword"
              >
                <svg v-if="showConfirmPassword" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20C7 20 2.73 16.39 1 12A18.45 18.45 0 0 1 5.06 5.06M9.9 4.24A9.12 9.12 0 0 1 12 4C17 4 21.27 7.61 23 12A18.5 18.5 0 0 1 19.42 16.42" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M12 9V15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M3 3L21 21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <svg v-else width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1 12S5 4 12 4S23 12 23 12S19 20 12 20S1 12 1 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
                </svg>
              </button>
            </div>
            <div v-if="passwordMatchError" class="error-message">
              {{ passwordMatchError }}
            </div>
          </div>

          <div class="form-group checkbox-group">
            <label class="terms-checkbox">
              <input
                v-model="agreeToTerms"
                type="checkbox"
                required
              />
              <span class="checkmark"></span>
              <span class="terms-text">
                我已阅读并同意
                <a href="#" class="terms-link">服务条款</a>
                和
                <a href="#" class="terms-link">隐私政策</a>
              </span>
            </label>
          </div>

          <button
            type="submit"
            class="submit-btn"
            :disabled="!isFormValid || loading"
          >
            <span v-if="loading" class="loading-spinner"></span>
            {{ loading ? '注册中...' : '创建账户' }}
          </button>
        </form>


      </div>
    </div>
  </div>
</template>

<script>
import { useAuthStore } from '../../store/auth'
import { useRouter } from 'vue-router'
import { checkEmail } from '../../api/auth'

export default {
  name: 'RegisterPage',
  setup() {
    const authStore = useAuthStore()
    const router = useRouter()

    return {
      authStore,
      router
    }
  },
  data() {
    return {
      firstName: '',
      lastName: '',
      email: '',
      password: '',
      confirmPassword: '',
      loading: false,
      showPassword: false,
      showConfirmPassword: false,
      agreeToTerms: false,
      errorMessage: '',
      emailCheckLoading: false,
      emailExistsError: '',
      emailCheckTimeout: null
    }
  },
  computed: {
    passwordStrengthClass() {
      const strength = this.getPasswordStrength();
      if (strength < 2) return 'weak';
      if (strength < 4) return 'medium';
      return 'strong';
    },
    passwordStrengthText() {
      const strength = this.getPasswordStrength();
      if (!this.password) return '';
      if (strength < 2) return '密码强度：弱';
      if (strength < 4) return '密码强度：中等';
      return '密码强度：强';
    },
    isEmailValid() {
      if (!this.email) return true; // 空值时不显示错误
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      return emailRegex.test(this.email);
    },
    emailErrorMessage() {
      if (!this.email) return '';
      if (!this.isEmailValid) return '请输入有效的邮箱地址';
      if (this.emailExistsError) return this.emailExistsError;
      return '';
    },
    passwordMatchError() {
      if (!this.confirmPassword || this.password === this.confirmPassword) return '';
      return '两次输入的密码不一致';
    },
    passwordLengthError() {
      if (!this.password) return '';
      if (this.password.length < 8) return '密码长度至少需要8位';
      return '';
    },
    isFormValid() {
      const isValid = this.firstName && 
             this.lastName && 
             this.email && 
             this.isEmailValid &&
             !this.emailExistsError &&
             this.password && 
             this.confirmPassword && 
             this.password === this.confirmPassword && 
             this.agreeToTerms &&
             this.password.length >= 8; // 恢复为8位要求
             
      return isValid;
    }
  },
  methods: {
    async checkEmailExists() {
      if (!this.email || !this.isEmailValid) {
        this.emailExistsError = '';
        return;
      }

      // 清除之前的定时器
      if (this.emailCheckTimeout) {
        clearTimeout(this.emailCheckTimeout);
      }

      // 设置延迟检查，避免频繁请求
      this.emailCheckTimeout = setTimeout(async () => {
        this.emailCheckLoading = true;
        this.emailExistsError = '';
        
        try {
          const result = await checkEmail(this.email);
          if (result.exists) {
            this.emailExistsError = result.message;
          }
        } catch (error) {
          console.error('邮箱检查失败:', error);
          // 不显示错误，避免影响用户体验
        } finally {
          this.emailCheckLoading = false;
        }
      }, 500); // 500ms延迟
    },
    getPasswordStrength() {
      let strength = 0;
      if (this.password.length >= 8) strength++;
      if (/[a-z]/.test(this.password)) strength++;
      if (/[A-Z]/.test(this.password)) strength++;
      if (/[0-9]/.test(this.password)) strength++;
      if (/[^A-Za-z0-9]/.test(this.password)) strength++;
      return strength;
    },
    async handleRegister() {
      // 验证密码一致性
      if (this.password !== this.confirmPassword) {
        this.errorMessage = '两次输入的密码不一致';
        return;
      }
      
      // 清除之前的错误信息
      this.errorMessage = '';
      
      this.loading = true
      try {
        // 调用注册API
        const userData = {
          username: this.email, // 使用邮箱作为用户名
          email: this.email,
          password: this.password,
          first_name: this.firstName,
          last_name: this.lastName
        };
        
        await this.authStore.registerUser(userData);
        
        // 注册成功提示
        alert('注册成功！请登录您的账户。');
        
        // 注册成功后重定向到登录页
        this.router.push('/auth/login')
      } catch (error) {
        console.error('注册失败:', error)
        // 显示友好的错误提示
        this.errorMessage = error.detail || error.message || '注册失败，请检查输入信息';
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>
/* Chrome浏览器兼容性修复 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.auth-container {
  display: flex;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* 左侧品牌展示区域 */
.brand-section {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.brand-content {
  text-align: center;
  color: white;
  z-index: 2;
  position: relative;
  padding: 2rem;
  width: 100%;
  max-width: 500px;
}

.brand-header {
  margin-bottom: 3rem;
}

.brand-logo {
  margin-bottom: 2rem;
  display: flex;
  justify-content: center;
}

.brand-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  background: linear-gradient(45deg, #ffffff, #f0f0f0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
}

.brand-subtitle {
  font-size: 1.1rem;
  opacity: 0.9;
  margin-bottom: 0;
  line-height: 1.4;
}

.brand-features {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
}

.feature-icon {
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  flex-shrink: 0;
}

.feature-text h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: white;
}

.feature-text p {
  font-size: 0.875rem;
  opacity: 0.8;
  margin: 0;
  line-height: 1.3;
}

/* 装饰性图形 */
.decorative-shapes {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  animation: float 6s ease-in-out infinite;
}

.shape-1 {
  width: 200px;
  height: 200px;
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.shape-2 {
  width: 150px;
  height: 150px;
  top: 60%;
  right: 15%;
  animation-delay: 2s;
}

.shape-3 {
  width: 100px;
  height: 100px;
  bottom: 20%;
  left: 20%;
  animation-delay: 4s;
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(180deg); }
}

/* 右侧表单区域 */
.form-section {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  padding: 2rem;
  overflow-y: auto;
}

.form-container {
  width: 100%;
  max-width: 400px;
}

.form-header {
  text-align: center;
  margin-bottom: 2rem;
}

.form-title {
  font-size: 2rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 0.5rem;
}

.form-subtitle {
  color: #6b7280;
  font-size: 0.95rem;
}

.login-link {
  color: #667eea;
  text-decoration: none;
  font-weight: 600;
}

.login-link:hover {
  text-decoration: underline;
}

/* 社交登录按钮 */
.social-login {
  margin-bottom: 1.5rem;
}

.social-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 0.75rem;
  background: white;
  color: #374151;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.social-btn:hover {
  border-color: #d1d5db;
  background: #f9fafb;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.google-btn {
  border-color: #dadce0;
}

.google-btn:hover {
  border-color: #9aa0a6;
  background: #f8f9fa;
}

/* 分割线 */
.divider {
  position: relative;
  text-align: center;
  margin: 1.5rem 0;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}

.divider span {
  color: #9ca3af;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}

/* 表单样式 */
.register-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-label {
  font-weight: 600;
  color: #374151;
  font-size: 0.875rem;
}

.form-input {
  padding: 0.875rem 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 0.75rem;
  font-size: 1rem;
  transition: all 0.2s ease;
  background: white;
  color: #1f2937;
  font-weight: 500;
  width: 100%;
  box-sizing: border-box;
}

.form-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  color: #111827;
}

.form-input.error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
  color: #1f2937;
}

.form-input::placeholder {
  color: #6b7280;
  font-weight: 400;
}

/* 密码输入容器 */
.password-input-wrapper {
  position: relative;
}

.password-toggle {
  position: absolute;
  right: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0.25rem;
  transition: color 0.2s ease;
  z-index: 1;
}

.password-toggle:hover {
  color: #374151;
}

/* 密码强度指示器 */
.password-strength {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.strength-bar {
  flex: 1;
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
  overflow: hidden;
}

.strength-fill {
  height: 100%;
  transition: all 0.3s ease;
  border-radius: 2px;
}

.strength-fill.weak {
  width: 33%;
  background: #ef4444;
}

.strength-fill.medium {
  width: 66%;
  background: #f59e0b;
}

.strength-fill.strong {
  width: 100%;
  background: #10b981;
}

.strength-text {
  font-size: 0.75rem;
  color: #6b7280;
  white-space: nowrap;
}

/* 错误消息 */
.error-message {
  font-size: 0.75rem;
  color: #ef4444;
  margin-top: 0.25rem;
}

/* 检查状态消息 */
.checking-message {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.checking-message::before {
  content: '';
  width: 12px;
  height: 12px;
  border: 2px solid #e5e7eb;
  border-top: 2px solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 条款同意 */
.terms {
  margin: 1rem 0;
}

.terms-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: #374151;
  cursor: pointer;
  user-select: none;
  line-height: 1.5;
}

.terms-checkbox input[type="checkbox"] {
  display: none;
}

.checkmark {
  width: 18px;
  height: 18px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  position: relative;
  transition: all 0.2s ease;
  flex-shrink: 0;
  margin-top: 2px;
}

.terms-checkbox input[type="checkbox"]:checked + .checkmark {
  background: #667eea;
  border-color: #667eea;
}

.terms-checkbox input[type="checkbox"]:checked + .checkmark::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.terms-text {
  color: #374151;
  font-weight: 500;
}

.terms-link {
  color: #667eea;
  text-decoration: none;
  font-weight: 600;
}

.terms-link:hover {
  text-decoration: underline;
}

/* 提交按钮 */
.submit-btn {
  width: 100%;
  padding: 0.875rem 1rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
}

.submit-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* 安全提示 */
.security-notice {
  background: #f0f9ff;
  border: 1px solid #e0f2fe;
  border-radius: 0.5rem;
  padding: 0.75rem;
  margin-top: 1rem;
  text-align: center;
}

.security-notice p {
  font-size: 0.75rem;
  color: #0369a1;
  margin: 0;
  line-height: 1.4;
}

/* 加载动画 */
.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 错误提示样式 */
.error-message {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.5rem;
  padding: 0.75rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.error-icon {
  flex-shrink: 0;
}

.error-text {
  color: #dc2626;
  font-size: 0.875rem;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .auth-container {
    flex-direction: column;
  }
  
  .brand-section,
  .form-section {
    width: 100%;
    min-height: 50vh;
  }
  
  .brand-section {
    order: 2;
  }
  
  .form-section {
    order: 1;
    padding: 1.5rem;
  }
  
  .form-container {
    max-width: 100%;
    padding: 1rem;
  }
  
  .brand-title {
    font-size: 2rem;
  }
  
  .brand-subtitle {
    font-size: 1rem;
  }
  
  .form-title {
    font-size: 1.75rem;
  }
  
  .form-row {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

@media (max-width: 480px) {
  .form-section {
    padding: 1rem;
  }
  
  .form-container {
    max-width: 100%;
  }
  
  .form-row {
    gap: 1rem;
  }
}

/* 宽屏优化 */
@media (min-width: 1440px) {
  .brand-section {
    flex: 1.2;
  }
  
  .form-section {
    flex: 0.8;
  }
  
  .brand-title {
    font-size: 3.5rem;
  }
  
  .brand-subtitle {
    font-size: 1.5rem;
  }
  
  .form-container {
    max-width: 500px;
  }
}

@media (min-width: 1920px) {
  .brand-title {
    font-size: 4rem;
  }
  
  .brand-subtitle {
    font-size: 1.75rem;
  }
  
  .form-container {
    max-width: 550px;
  }
  
  .form-title {
    font-size: 2.25rem;
  }
}
</style>